<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>滨海基金 -客户跟进记录</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Data Tables -->
<link href="css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
<link href="css/common.css" rel="stylesheet">
<script src="js/My97DatePicker/WdatePicker.js"></script>
<script src="js/plugins/sweetalert/sweetalert.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/jeditable/jquery.jeditable.js"></script>
<script src="js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script type="text/javascript"
	src="http://tajs.qq.com/stats?sId=9051096" charset="UTF-8"></script>
<script type="text/javascript" src="js/img_upload.js"></script>
<script type="text/javascript" src="js/fileUploadUtil.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<style type="text/css">
/* dataTables列内容居中 */
.table>tbody>tr>td {
	text-align: center;
}
/* dataTables表头居中 */
.table>thead:first-child>tr:first-child>th {
	text-align: center;
}
</style>
</head>
<body class="gray-bg">
	<div class="row">
		<div class="col-sm-12">
			<div class="ibox float-e-margins">
				<div class="ibox-title">
					<h5>
						客户 <small>跟进,记录</small>
					</h5>
					<div class="ibox-tools">
						<a class="btn  btn-sm btn-bitbucket"
							href="toEmployeeInfo.do?v=4.0"> <i class="fa fa-reply"></i>
							返回
						</a> <input type="hidden" id="userId" value="${empId }" />
					</div>
					<div class="ibox-content">
						<div class="input-group col-md-3"
							style="margin-top: 0px; positon: relative; float: left; bottom: -5px;">
							<input id="describe" type="text" class="form-control "
								placeholder="请输入关键字（描述）"/ > <span
								class="input-group-btn">
								<button onclick="Search()" class="btn btn-info btn-search">查询</button>
							</span>
						</div>
						<table
							class="table table-striped table-bordered table-hover dataTables-example"
							id="dataTables-example">
							<thead>
								<tr style="height: 30px">
									<th style="width: 50px" align="center">序号</th>
									<th style="width: 120px" align="center">跟进客户</th>
									<th style="width: 140px" align="center">跟进时间</th>
									<th style="width: 100px" align="center">定位坐标</th>
									<th style="width: 100px" align="center">照片记录</th>
									<th style="width: 400px" align="center">描述</th>
									<th style="width: 120px" align="center">业务员</th>
									<th style="width: 50px" align="center">操作</th>
								</tr>
							</thead>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--详情modal  -->
	<div class="modal fade  " id='followDetailModal'>
		<div class="modal-dialog" style="width: 700px; height: 500px;">
			<div class="modal-content">
				<div class="modal-header">
					<button class="close" data-dismiss='modal'>×</button>
					<h2 class="modal-title" align="center">跟进详情</h2>
				</div>

				<div class="modal-body" align="center">

					<table id="followDetailTab" class="showTable">



					</table>
					<!-- <input type="text" id="graphicsText" name="graphicsText"> -->
					<!-- <input type="hidden"  name="status" value="0"> -->

				</div>
				<div class="modal-footer" align="center">
					<div align="center">
						<button class="btn btn-primary"
							onclick="closeModal(followDetailModal)">确认</button>
					</div>
				</div>
			</div>
		</div>
	</div>


	<!-- 详情模态框 -->
	<div class="modal fade" id='detailModal'>
		<div class="modal-dialog" style="width: 950px; height: 600px;">
			<div class="modal-content">
				<div class="modal-header">
					<button class="close" data-dismiss='modal'>×</button>

					<h2 class="modal-title" align="center">产品详情信息</h2>
				</div>

				<div class="modal-body" align="center">
					<form class="form-horizontal m-t" id="detailForm"
						enctype="multipart/form-data">
						<div class="row form-body form-horizontal m-t">
							<div class="col-md-6 droppable sortable">
							<div class="form-group draggable">
									<label class="col-sm-3 control-label">跟进客户： </label>
									<div class="col-sm-8">
										<input type="text" name="followDate" id="dfollowCustomer"
											class="form-control" disabled="disabled">
									</div>
								</div>
								<div class="form-group draggable">
									<label class="col-sm-3 control-label">跟进时间： </label>
									<div class="col-sm-8">
										<input type="text" name="followDate" id="dfollowDate"
											class="form-control" disabled="disabled"> <input
											type="hidden" name="productId" id="eproductId"
											disabled="disabled">
									</div>
								</div>
								<div class="form-group draggable">
									<label class="col-sm-3 control-label">定位坐标： </label>
									<div class="col-sm-8">
										<input type="text" name="coordinate" id="dcoordinate"
											class="form-control" disabled="disabled">
									</div>
								</div>
								<div class="form-group draggable">
									<label class="col-sm-3 control-label">业务员： </label>
									<div class="col-sm-8">
										<input type="text" name="employeeName" id="demployeeName"
											class="form-control" disabled="disabled">
									</div>
								</div>
								<div class="form-group draggable">
									<label class="col-sm-3 control-label">描述： </label>
									<div class="col-sm-8">
										<textarea class="showTextarea" id="ddepict" name="depict"
											rows="20" cols="" class="form-control"
											style="width: 735px; height: 200px;" disabled="disabled"></textarea>
									</div>
								</div>
							</div>
							<div class="col-md-6 droppable sortable">
								<div class="form-group draggable">
									<label class="col-sm-3 control-label">照片记录：</label>
									<div class="col-sm-8">
										<img onerror="this.src='img/error-img.png'" width='150px'
											height='130px' src="null" id='dpicture' name='picture'
											align="left" ;  />
									</div>
								</div>
							</div>
					</form>
				</div>
				<div class="modal-footer" align="center">
					<div align="center">
						<button class="btn btn-primary" onclick="modalClose(detailModal)">确认</button>
					</div>
				</div>
			</div>
		</div>
	</div>



	<script type="text/javascript">
			var table;
			$(function() {
				//提示信息
				var lang = {
					"sProcessing" : "<div style=\"float:right;width:50%\" >处理中...</div>",
					"sLengthMenu" : "每页 _MENU_ 项",
					"sZeroRecords" : "没有匹配结果",
					"sInfo" : "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
					"sInfoEmpty" : "当前显示第 0 至 0 项，共 0 项",
					"sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
					"sInfoPostFix" : "",
					"sSearch" : "搜索:",
					"sUrl" : "",
					"sEmptyTable" : "表中数据为空",
					"sLoadingRecords" : "载入中...",
					"sInfoThousands" : ",",
					"oPaginate" : {
						"sFirst" : "首页",
						"sPrevious" : "上页",
						"sNext" : "下页",
						"sLast" : "末页",
						"sJump" : "跳转"
					},
					"oAria" : {
						"sSortAscending" : ": 以升序排列此列",
						"sSortDescending" : ": 以降序排列此列"
					}
				};
				//初始化表格
				table = $("#dataTables-example")
						.dataTable(
								{
									"fnDrawCallback" : function() {
										var api = this.api();
										var startIndex = api.context[0]._iDisplayStart;//获取到本页开始的条数
										api.column(0).nodes().each(
												function(cell, i) {
													cell.innerHTML = startIndex
															+ i + 1;
												});
									},
									language : lang, //提示信息
									autoWidth : false, //禁用自动调整列宽
									stripeClasses : [ "odd", "even" ], //为奇偶行加上样式，兼容不支持CSS伪类的场合
									processing : true, //隐藏加载提示,自行处理
									serverSide : true, //启用服务器端分页
									searching : false, //禁用原生搜索
									orderMulti : false, //启用多列排序
									order : [], //取消默认排序查询,否则复选框一列会出现小箭头
									renderer : "bootstrap", //渲染样式：Bootstrap和jquery-ui
									pagingType : "simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
									"aLengthMenu" : [ 10 ],
									"bLengthChange": false,//隐藏分页数量选择框
									ordering : false, //关闭排序图标
									ajax : function(data, callback, settings) {
										//封装请求参数
										var param = {};
										param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
										param.start = data.start;//开始的记录序号
										param.page = (data.start / data.length) + 1;//当前页码
										//console.log(param);
										param.userId=$("#userId").val();
										 var describe = $("#describe").val().trim();
										if (describe != null && describe != "") {
											param.describe = describe;
										} 
										//ajax请求数据
										
												$.ajax({
													type : "POST",
													url : "followList.do",
													cache : false, //禁用缓存
													data : param, //传入组装的参数
													dataType : "json",
													success : function(result) {
														//console.log(result);
														//setTimeout仅为测试延迟效果
														setTimeout(
																function() {
																	//封装返回数据
																	var returnData = {};
																	draw = result.draw;//后台返回的计数器
																	returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
																	returnData.recordsTotal = result.total;//返回数据全部记录
																	returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果
																	returnData.data = result.data;//返回的数据列表
																	//console.log(returnData);
																	//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
																	//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
																	callback(returnData);
																}, 200);
													}
												});
									},
									//列表表头字段
									columns : [
											{
												"data" : null
											}, {
												"data" : function(data) {
													return data.customer.customerName;
												}
											},
											{
												"data" : function(data) {
													
															
													return toDateTime(new Date(data.followDate));
												}
											},
											{
												"data" : "coordinate"
											},
											{
												"data" : function(data) {
													return "<img alt=\"\" width=\"40\" height=\"30\"src=\""+data.picture+"\"  onerror=\"this.src='img/error-img.png'\">";
												}
											}, {
												"data" : "depict"
											}, {
												"data" : function(data) {
													return data.employee.name;
												}
											} ],
											columnDefs:[
											            {
											            	"targets":[5],
											            	"render":function(data,type,full){
											            		if(data==null){
											    					return "";
											    				}
											    				if(data.length > 20){
											    					return data
											    					.substr(0, 20)
											    					+ "...";
											    				}
											    				else{
											    					return data
											    				}
											            	}
											            	
											            },{
										            		"targets":[7],   //第14列加一条 自定义列
									                    	"data":"customerFollowRecordsId",     //数据列名
									                    	"render":function(data,type,full){        //返回自定义的内容
																//console.log(data);
									                    		/* */
									                    		return "<a class=\"btn btn-info btn-xs\" data-toggle=\"modal\"  onclick=\"followDetail('"+data+"')\"> 详情<\a>";
									                    		
										                    		
									                    	}
										            		
										            	}
											            
											 ]
								})//.api();
			});
			function Search() {
				/* var oSettings = table.fnSettings();  
				oSettings._iDisplayStart = 0;  
				table.fnDraw(oSettings);   */
				table.fnDraw();
			}
			
			function followDetail(followId){
				$.ajax({
					url:"followDetail.do",
					data:{"id":followId},
					type:"post",
					dataType:"json",
					success:function(result){
						if(result.code==1){
							$("#dfollowDate").val(FormatDate(new Date(result.cust.followDate)));
							$("#dcoordinate").val(result.cust.coordinate);
							if(result.cust.picture != null){
								$("#dpicture").attr("src",result.cust.picture);
							}else{
								$("#dpicture").attr("src",false);
							}
							$("#dfollowCustomer").val(result.cust.customer.customerName);
							$("#demployeeName").val(result.cust.employee.name);
							$("#ddepict").val(result.cust.depict);
							$("#detailModal").modal("show");
						}else if(result.code==-2){
							swal({
    					        title: "提示",
    					        text: "请登录!",
    					        type: "error",
    					        confirmButtonColor: "#DD6B55",
    					        confirmButtonText: "确定",
    					        closeOnConfirm: false
    					    }, function () {
    					       location="login.jsp";
    					    });
						}
						
					},error:function(){
						sweetAlert("异常","网络出现异常!","error");
					}
				
				});
			}
			//关闭modal
			function modalClose(htmlObj){
				$(htmlObj).modal("hide");
			}
			
		</script>
</body>

</html>